import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Form, RouteLayout , ListEditable } from 'weaver-mobile-page';
import { Tools, Icon, Result , Modal } from 'weaver-mobile';
import MeetingUtil from '../../../util/meetingUtil';
const ButtonGroup = RouteLayout.ButtonGroup;
const getLabel = Tools.getLabel;
const List = ListEditable.List

@inject('viewMeetingStore')
@withRouter
@observer
class BaseView extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
      };
    }
    componentDidMount() {
      const { getReceiptForm , recordId , setState , getReceiptCrmCondition , getReceiptCrmList } = this.props.viewMeetingStore;
      let tempRecordId =  recordId?recordId:sessionStorage.meetingMemberRecorderid;
      setState({recordId:tempRecordId})
      getReceiptForm();
      //客户回执填写
      getReceiptCrmCondition();
      getReceiptCrmList();
    }

    getFields = ()=>{
      const { receiptForm , crmReceiptList , crmReceiptConditions ,isPreview ,crmReceiptData,crmReceiptInitialData,
        crmReceiptEditable,setCrmReceiptData} = this.props.viewMeetingStore;
      const { isInit ,conditioninfo } = receiptForm;
      const groups = [];
      let values = receiptForm.formParams
      isInit && conditioninfo.length!==0 && conditioninfo.forEach((group) => {
        const fields = [];
        if(group.isCrmReceiptDetail === true){
          if(crmReceiptList.data.length > 0 && isPreview==='1'){
            fields.push(<List 
              store={crmReceiptList}
              onRowSelect = {()=>{return;}}
              onRowClick = {()=>{return;}}
              showSN = {true}
              conditions = {crmReceiptConditions}
              />
              )
          }else if(isPreview==='0'){
            fields.push(<ListEditable
              store={crmReceiptEditable}
              rowKey="id"
              data={crmReceiptData}
              initData={crmReceiptInitialData}
              conditions = {crmReceiptConditions}
              showSN = {true}
              showCopy = {false}
              onChange={(newData) => {
                setCrmReceiptData(newData)
              }}
              willDelete={newData => new Promise((resolve) => {
                Modal.alert('确定要删除吗？', '', [
                  { text: '取消', onPress: () => resolve(false) },
                  {
                    text: '确定',
                    onPress: () => {
                      resolve(newData);
                    },
                  },
                ]);
              })}
              />
              )
          }else{
            fields.push(<div className={'lastlySignList-nodata'}>
            <Result
              img={<Icon type="no-data" />}
              message={getLabel(83553, '暂无数据')}
            />
          </div>
              )
          }
          
        }else{
          group.items.forEach((field) => {
            //会议回执点击不参加的时候显示的
            if(values['isattend'] === '2'){
              if(field.domkey[0] !== 'recRemark' && field.domkey[0] !== 'othermember' && field.domkey[0] !== 'isattend' 
                && field.domkey[0] !== 'memberId' && field.domkey[0] !== 'memberManager'){
                return;
              }
            }
            //会议回执点击参加并且选中订房的时候显示的
            if(values['isattend'] === '1' && values['bookroom'] === '2'){
              if(field.domkey[0] === 'roomstander'){
                return;
              }
            }
            //会议回执点击参加并且选中订房的时候显示的
            if(values['isattend'] === '1' && values['bookticket'] === '2'){
              if(field.domkey[0] === 'tickettype' || field.domkey[0] === 'ticketstanderAir' || field.domkey[0] === 'ticketstanderTrain'
              || field.domkey[0] === 'backdate' || field.domkey[0] === 'backtime'){
                return;
              }
            }else if(values['isattend'] === '1' && values['bookticket'] === '1'){
              if(values['tickettype'] === ''){
                if(field.domkey[0] === 'ticketstanderAir' || field.domkey[0] === 'ticketstanderTrain'){
                  return;
                }
              }else if(values['tickettype'] === '0'){
                if(field.domkey[0] === 'ticketstanderTrain'){
                  return;
                }
              }else if(values['tickettype'] === '1'){
                if(field.domkey[0] === 'ticketstanderAir'){
                  return;
                }
              }
            }
            fields.push(<Form.Item
              key={field.domkey.join('__')}
              form={receiptForm}
              fieldConfig={field}
              onChange={receiptForm.onChange}
            />);
          })
        }
        
        groups.push(
          // 分组
          <div className='fold-group' key={group.title}>
            <div className='fold-title' onClick={() => {this.handleToggle(group.title, !group.show)}}>
              {group.title}
              <Icon className="flod-icon" type={group.show ? 'up' : 'down'} />
            </div>
            <div className={`${group.show ? 'show' : 'hide'}`}>
              {fields}
            </div>
          </div>
        )
      })
      return groups;
    }

    handleToggle = (...arg) => {
      const {groupToggleReceiptForm} = this.props.viewMeetingStore;
      groupToggleReceiptForm(...arg);
    }
    
    render() {
        const { isPreview , canEdit, onLoading } = this.props.viewMeetingStore;
        const baseHeight = this.getHeight();
        return (
          <div className={'receipt-form-contain'}>
            <div style={{height:baseHeight,overflowY:'auto'}}>
              {this.getFields()}
            </div>
            {isPreview==='0'?<ButtonGroup data={[
              {
                key: 'submit',
                type:'primary',
                text: getLabel(725, '提交'),
                disabled:onLoading,
                onClick: () => {this.onReceipt()},
              },
              {
                key: 'reset',
                text: getLabel(2022, '重置'),
                disabled:onLoading,
                onClick: () => {this.reset()},
              },
              ]}/>:isPreview==='1' && canEdit === true?<ButtonGroup data={[
                {
                  key: 'submit',
                  type:'primary',
                  text: getLabel(391080, '重新提交回执'),
                  onClick: () => {this.reSubmitReceipt()},
                },
                ]}/>:''}
            </div>
        )
    }

    onReceipt = ()=>{
      const { receiptForm ,submitReceipt,crmReceiptEditable,crmReceiptData,memberType} = this.props.viewMeetingStore;
      this.setOnLoading(true)
      let { allCrmData } = this.props.viewMeetingStore;
      const valuesTemp = receiptForm.formParams
      allCrmData = {...allCrmData,...valuesTemp};
      //因为交通方式是两种air和train,和后端交互参数不一致,所以交通方式重新赋值
      const {tickettype,ticketstanderAir,ticketstanderTrain} = allCrmData;
      if(tickettype === '0'){
        allCrmData = {...allCrmData,ticketstander:ticketstanderAir}
      }else if(tickettype === '1'){
        allCrmData = {...allCrmData,ticketstander:ticketstanderTrain}
      }
      //计算客户详情
      if(memberType === 2){
        const formList = crmReceiptEditable.formList;
        allCrmData = {...allCrmData,membercrmrows:Object.keys(formList).length}
        let eachvalue = {};
        crmReceiptData.forEach((val1,index)=>{
          Object.keys(val1).forEach((key2,value)=>{
            eachvalue[`${key2}_${index}`]=val1[key2]
          })
        })
        allCrmData = {...allCrmData,...eachvalue}
      }
      if(allCrmData['isattend']==2){
          allCrmData['begindate']="";
          allCrmData['begintime']="";
          allCrmData['bookroom']="";
          allCrmData['roomstander']="";
          allCrmData['bookticket']="";
          allCrmData['tickettype']="";
          allCrmData['ticketstander']="";
          allCrmData['ticketstanderAir']="";
          allCrmData['ticketstanderTrain']="";
          allCrmData['backdate']="";
          allCrmData['backtime']="";
      }
      if(allCrmData['bookroom']==2){
        allCrmData['roomstander']="";
      }
      if(allCrmData['bookticket']==2){
        allCrmData['tickettype']="";
        allCrmData['ticketstander']="";
        allCrmData['ticketstanderAir']="";
        allCrmData['ticketstanderTrain']="";
        allCrmData['backdate']="";
        allCrmData['backtime']="";
      }
      submitReceipt(allCrmData,this.goBack);
    }

    reset = ()=>{
      const { receiptForm } = this.props.viewMeetingStore;
      receiptForm.updateFields({
        isattend:{
            value:'1'
        }, 
        begindate:{
            value:""
        }, 
        begintime:{
            value:""
        },
        bookroom:{
            value:"2"
        },
        roomstander:{
            value:""
        },
        bookticket:{
            value:"2"
        },
        tickettype:{
            value:""
        },
        ticketstanderAir:{
            value:''
        },
        ticketstanderTrain:{
            value:''
        },
        backdate:{
            value:''
        },
        backtime:{
            value:""
        },
        recRemark:{
            value:""
        },
        othermember:{
            value:''
        }
    })
    }

    reSubmitReceipt = ()=>{
      const { getReceiptForm , setState} = this.props.viewMeetingStore;
      setState({isPreview:'0'})
      getReceiptForm();
      
    }

    goBack = ()=>{
      this.props.history.goBack()
      this.setOnLoading(false)
    }

    setOnLoading = (flg=false)=> {
      const { setState } = this.props.viewMeetingStore;
      setState({onLoading:flg})
    }

    getHeight = () => {
      const { canEdit } = this.props.viewMeetingStore;
      if(canEdit){
        return document.body.clientHeight - MeetingUtil.getTabHeight();
      }else{
        return document.body.clientHeight;
      }
    }
}

export default BaseView;